<template>
  <van-list
    v-model:loading="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="onLoad"
  >
    <film-item v-for="item in list" />
  </van-list>
</template>

<script>
export default { name: "now-playing" };
</script>

<script setup>
import { ref } from "vue";
import { getFilmList } from "../../api/film";
import FilmItem from "../../components/film-item/index.vue";

// 数据
const list = ref([]);
// 加载中
const loading = ref(false);
// 是否加载完成全部数据
const finished = ref(false);

// 当前页数
let pageNum = 1;
// 总页数
let pageToal = 1;

// 加载数据的函数
const onLoad = () => {
  // 调用 getFilmList 接口
  getFilmList(pageNum)
    .then((response) => {
      const {
        data: { films, total },
      } = response;

      list.value.push(...films);

      // 计算总页数
      pageToal = Math.floor(total / 10);
    })
    .finally(() => {
      // 将 loading 设置为 false
      loading.value = false;
      if (pageNum > pageToal) {
        finished.value = true;
      } else {
        finished.value = false;
        // 将 pageNum ++
        pageNum++;
      }
    });

  // 异步更新数据
  // setTimeout 仅做示例，真实场景中一般为 ajax 请求
  // setTimeout(() => {
  //   for (let i = 0; i < 10; i++) {
  //     list.value.push(list.value.length + 1);
  //   }
  //   // 加载状态结束
  //   loading.value = false;
  //   // 数据全部加载完成
  //   if (list.value.length >= 40) {
  //     finished.value = true;
  //   }
  // }, 5000);
};
</script>
